<!--
 * @Description: monaco-editor源代码编辑器
 * @Author: zhiHong Deng
 * @Date: 2023-06-07 09:07:21
 * @LastEditTime: 2023-06-14 17:46:07
 * @LastEditors: zhiHong Deng
-->
<template>
	<el-row  class="samples-container">
    <el-col :span="24">
      <MonacoEditor
        :code="contentText"
        @codeChange="codeChange"
      />
    </el-col>
	</el-row >
</template>

<script setup>
  import { ref, onMounted, watch } from 'vue';
  import { useRoute } from 'vue-router'
  import { ElMessage } from 'element-plus'
	import { MonacoEditor } from './index.js';
  import fold from '@/assets/img/fold.png';
  import open from '@/assets/img/open.png';

  const route = useRoute()
  // const defaultCodeWidth = 500
  // const minCodeWidth = 0
  const codeVisible = ref(false)
  const renderer = ref(null)
  const contentText = ref(null)
  const sourceCodePath = ref(null)

  onMounted(() => {
    codePath()
  })

  // 代码路径
  const codePath = async () => {
    try {
	  const code = await fetch(`code/hello.html`);
      contentText.value = await code.text();
      codeChange(contentText.value);
    } catch (error) {
      console.error(error);
      ElMessage.warning(error);
    }
  }
  // 向iframe空页面写代码
  const codeChange = (code) => {

  }
  watch(
		() => route.params.id,
		(newValue, oldValue) => {
      sourceCodePath.value = newValue.substr(newValue.indexOf(":") + 1, newValue.length);
      codePath()
		},
    {
      immediate: true
    }
	)
</script>

<style lang="scss" scoped>
.samples-container {
  height: 100vh;
  .samples-render {
    position: relative;
    .code-operate {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      &-icon {
        width: 40px;
        &:hover {
          height: 100px;
          cursor: pointer;
        }
      }
    }
    &-iframe {
      display: flex;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
